<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../static/css/layout.css">
    <link rel="stylesheet" href="../static/css/containerCss.css">
</head>
<body>
<div id="app">

    <el-container>
<!--        登录页页头-->
        <el-header  >
            <p style="font-family: 'Agency FB' ">
                欢迎来到东软云医院His
            </p>
        </el-header>
<!--        登录表单-->
        <el-main>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-row>
                <el-col :push="6" :span="12">
                <el-form-item label="账号" prop="username">
                    <el-input type="text"  v-model="ruleForm.username" autocomplete="off" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                </el-col>
                </el-row>

                <el-row>
                <el-col :push="6" :span="12">
                <el-form-item label="密码"  prop="pass">
                    <el-input  type="password" v-model="ruleForm.pass" autocomplete="off" prefix-icon="el-icon-s-custom"></el-input>
                </el-form-item>
                </el-col>
                </el-row>

                <el-row>
                <el-col :push="6" :span="12">
                <el-form-item v-show="1===2" label="确认密码"  prop="checkPass">

                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" prefix-icon="el-icon-s-check"></el-input>

                </el-form-item>
                </el-col>
                </el-row>

                <el-row>
                <el-col :push="6" :span="12">
                <el-form-item v-show="1===2"  label="级别" prop="age">
                    <el-input    v-model.number="ruleForm.age" prefix-icon="el-icon-apple"></el-input>
                </el-form-item>
                </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="subDoc('ruleForm')">挂号登录</el-button>
                    <el-button type="primary" @click="subDoc('ruleForm')">药房登录</el-button>
                    <el-button type="primary" @click="subDoc('ruleForm')">医生登录</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-main>
<!--        登录页脚-->
        <el-footer >@author 符敦耀-
                <el-link icon="el-icon-medal" href="https://github.com/duddmure?tab=repositories" target="_blank">github</el-link>-
                <el-link icon="el-icon-trophy">gitee </el-link>


        </el-footer>
    </el-container>

</div>
</body>
<!--axios min-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));

                } else {
                    if (this.ruleForm.checkPass !== '') {
                        callback();
                        // this.$refs.ruleForm.validateField('checkPass');

                    }
                    return callback();
                }

            };
            var validateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    username: '',
                    pass: '',
                },
                rules: {
                    pass: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    username:[
                        { validator: validateName, trigger: 'blur'}
                    ]

                }
            };
        },
        methods: {
            subDoc(formName){
              this.$refs[formName].validate((valid) =>{
                  if (valid){
                      axios.post("http://localhost:8900/loginControl/loginCheck",this.ruleForm).then(function (response) {
                          if(response.data===1){
                              alert('success');
                              window.location.href='docVue.html';
                          }
                          else if(response.data===3){
                              alert('success');
                              window.location.href='registerVue.html';
                          }
                          else if(response.data===2){
                              alert('success');
                              window.location.href='givenDrugs.html';
                          }
                          else{
                              alert('error');
                          }
                      }),function (err) {
                          console.log(err);
                      }
                  }
                  else {
                      alert('error')
                      return false;
                  }
              })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }


    })
</script>
</html>
